<template>
  <div class="equipment-ledger-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>设备台账管理</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreate">新建设备</el-button>
            <el-upload
              class="upload-btn"
              :action="uploadUrl"
              :show-file-list="false"
              :before-upload="beforeUpload"
              :on-success="handleUploadSuccess"
            >
              <el-button type="primary">导入设备</el-button>
            </el-upload>
            <el-button type="primary" @click="handleExport">导出设备</el-button>
          </div>
        </div>
      </template>

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="设备编码">
          <el-input v-model="queryForm.code" placeholder="请输入设备编码" />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="queryForm.name" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select
            v-model="queryForm.type"
            placeholder="请选择设备类型"
            clearable
          >
            <el-option
              v-for="item in equipmentTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select
            v-model="queryForm.status"
            placeholder="请选择使用状态"
            clearable
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 设备列表 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="code" label="设备编码" width="120" />
        <el-table-column prop="name" label="设备名称" width="150" />
        <el-table-column prop="type" label="设备类型" width="120" />
        <el-table-column prop="model" label="规格型号" width="120" />
        <el-table-column prop="manufacturer" label="生产厂商" width="150" />
        <el-table-column prop="purchaseDate" label="购置日期" width="120" />
        <el-table-column prop="department" label="使用部门" width="120" />
        <el-table-column prop="location" label="设备位置" width="120" />
        <el-table-column prop="status" label="使用状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-button link type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button link type="primary" @click="handleViewDocs(scope.row)"
              >文档</el-button
            >
            <el-button
              link
              type="danger"
              @click="handleDelete(scope.row)"
              v-if="scope.row.status === 'inactive'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新建/编辑设备对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'create' ? '新建设备' : '编辑设备'"
      width="60%"
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="设备编码" prop="code">
          <el-input v-model="form.code" placeholder="请输入设备编码" />
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择设备类型">
            <el-option
              v-for="item in equipmentTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="规格型号" prop="model">
          <el-input v-model="form.model" placeholder="请输入规格型号" />
        </el-form-item>
        <el-form-item label="生产厂商" prop="manufacturer">
          <el-input v-model="form.manufacturer" placeholder="请输入生产厂商" />
        </el-form-item>
        <el-form-item label="购置日期" prop="purchaseDate">
          <el-date-picker
            v-model="form.purchaseDate"
            type="date"
            placeholder="请选择购置日期"
          />
        </el-form-item>
        <el-form-item label="使用部门" prop="department">
          <el-input v-model="form.department" placeholder="请输入使用部门" />
        </el-form-item>
        <el-form-item label="设备位置" prop="location">
          <el-input v-model="form.location" placeholder="请输入设备位置" />
        </el-form-item>
        <el-form-item label="技术参数">
          <el-input
            v-model="form.parameters"
            type="textarea"
            rows="3"
            placeholder="请输入技术参数"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 设备文档对话框 -->
    <el-dialog v-model="docsDialogVisible" title="设备文档" width="50%">
      <el-upload
        class="upload-demo"
        :action="uploadUrl"
        :on-success="handleDocUploadSuccess"
        :on-remove="handleDocRemove"
        multiple
      >
        <el-button type="primary">上传文档</el-button>
      </el-upload>
      <el-table :data="documentList" style="width: 100%">
        <el-table-column prop="name" label="文档名称" />
        <el-table-column prop="type" label="文档类型" width="120" />
        <el-table-column prop="uploadTime" label="上传时间" width="180" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button link type="primary" @click="handleDownload(scope.row)"
              >下载</el-button
            >
            <el-button link type="danger" @click="handleDocDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 查询表单
const queryForm = reactive({
  code: "",
  name: "",
  type: "",
  status: "",
});

// 设备类型选项
const equipmentTypes = [
  { value: "production", label: "生产设备" },
  { value: "testing", label: "检测设备" },
  { value: "auxiliary", label: "辅助设备" },
  { value: "environmental", label: "环保设备" },
  { value: "safety", label: "安全设备" },
];

// 状态选项
const statusOptions = [
  { value: "active", label: "在用" },
  { value: "inactive", label: "停用" },
  { value: "maintenance", label: "维修中" },
  { value: "standby", label: "待机" },
  { value: "scrapped", label: "报废" },
];

// 表格数据
const tableData = ref([
  {
    code: "EQ001",
    name: "数控车床",
    type: "production",
    model: "CK6136",
    manufacturer: "沈阳机床厂",
    purchaseDate: "2023-01-01",
    department: "生产部",
    location: "车间A",
    status: "active",
  },
  {
    code: "EQ002",
    name: "加工中心",
    type: "production",
    model: "VMC850",
    manufacturer: "大连机床集团",
    purchaseDate: "2023-02-15",
    department: "生产部",
    location: "车间B",
    status: "active",
  },
  {
    code: "EQ003",
    name: "三坐标测量仪",
    type: "testing",
    model: "COORD3",
    manufacturer: "海克斯康",
    purchaseDate: "2023-03-20",
    department: "质检部",
    location: "实验室1",
    status: "maintenance",
  },
  {
    code: "EQ004",
    name: "空气压缩机",
    type: "auxiliary",
    model: "SA75",
    manufacturer: "复盛实业",
    purchaseDate: "2023-04-10",
    department: "动力部",
    location: "动力站",
    status: "active",
  },
  {
    code: "EQ005",
    name: "工业机器人",
    type: "production",
    model: "IRB 2600",
    manufacturer: "ABB",
    purchaseDate: "2023-05-01",
    department: "生产部",
    location: "车间C",
    status: "inactive",
  },
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 对话框
const dialogVisible = ref(false);
const dialogType = ref("create");
const formRef = ref(null);
const form = reactive({
  code: "",
  name: "",
  type: "",
  model: "",
  manufacturer: "",
  purchaseDate: "",
  department: "",
  location: "",
  parameters: "",
  remark: "",
});

// 表单校验规则
const rules = {
  code: [{ required: true, message: "请输入设备编码", trigger: "blur" }],
  name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择设备类型", trigger: "change" }],
  model: [{ required: true, message: "请输入规格型号", trigger: "blur" }],
  manufacturer: [
    { required: true, message: "请输入生产厂商", trigger: "blur" },
  ],
  purchaseDate: [
    { required: true, message: "请选择购置日期", trigger: "change" },
  ],
  department: [{ required: true, message: "请输入使用部门", trigger: "blur" }],
  location: [{ required: true, message: "请输入设备位置", trigger: "blur" }],
};

// 文档管理
const docsDialogVisible = ref(false);
const documentList = ref([]);
const uploadUrl = "/api/upload"; // 替换为实际的上传接口

// 获取状态类型
const getStatusType = (status) => {
  const statusMap = {
    active: "success",
    inactive: "info",
    maintenance: "warning",
    standby: "warning",
    scrapped: "danger",
  };
  return statusMap[status] || "info";
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    active: "在用",
    inactive: "停用",
    maintenance: "维修中",
    standby: "待机",
    scrapped: "报废",
  };
  return statusMap[status] || status;
};

// 查询方法
const handleSearch = () => {
  // 实现查询逻辑
  ElMessage.success("查询成功");
};

const handleReset = () => {
  queryForm.code = "";
  queryForm.name = "";
  queryForm.type = "";
  queryForm.status = "";
};

// 新建/编辑方法
const handleCreate = () => {
  dialogType.value = "create";
  dialogVisible.value = true;
  Object.assign(form, {
    code: "",
    name: "",
    type: "",
    model: "",
    manufacturer: "",
    purchaseDate: "",
    department: "",
    location: "",
    parameters: "",
    remark: "",
  });
};

const handleEdit = (row) => {
  dialogType.value = "edit";
  dialogVisible.value = true;
  Object.assign(form, row);
};

const handleSubmit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    if (valid) {
      // 实现提交逻辑
      ElMessage.success(
        dialogType.value === "create" ? "创建成功" : "更新成功"
      );
      dialogVisible.value = false;
    }
  });
};

// 文档管理方法
const handleViewDocs = (row) => {
  docsDialogVisible.value = true;
  // 加载文档列表
  documentList.value = [
    {
      name: "设备说明书.pdf",
      type: "PDF",
      uploadTime: "2024-03-20 10:00:00",
    },
    {
      name: "设备图纸.dwg",
      type: "CAD",
      uploadTime: "2024-03-20 11:30:00",
    },
    {
      name: "维护手册.doc",
      type: "Word",
      uploadTime: "2024-03-20 14:20:00",
    },
    {
      name: "验收报告.pdf",
      type: "PDF",
      uploadTime: "2024-03-20 16:45:00",
    },
  ];
};

const handleDocUploadSuccess = (response) => {
  ElMessage.success("上传成功");
};

const handleDocRemove = (file) => {
  ElMessage.success("删除成功");
};

const handleDownload = (row) => {
  ElMessage.success("开始下载");
};

const handleDocDelete = (row) => {
  ElMessageBox.confirm("确认删除该文档？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage.success("删除成功");
  });
};

// 导入导出方法
const beforeUpload = (file) => {
  // 实现上传前验证逻辑
  return true;
};

const handleUploadSuccess = (response) => {
  ElMessage.success("导入成功");
};

const handleExport = () => {
  ElMessage.success("导出成功");
};

// 删除方法
const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该设备？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage.success("删除成功");
  });
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};
</script>

<style scoped>
.equipment-ledger-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  text-align: right;
}

.upload-demo {
  margin-bottom: 20px;
}
</style>
